<script setup>
  import { onMounted, ref } from 'vue'
  import Timu from '@/components/TiMu.vue'
  import OptBtn from '@/components/OptBtn.vue'
  import CheckDialog from '@/components/CheckDialog.vue'
  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore();
  import { getTimuCommonList, getTimuDetail, getTmList } from '@/api/home.js'
  import { useSocket } from '@/utils/useSocket.js'
  const { on, emit } = useSocket(import.meta.env.VITE_API_BASE_URL)
  import logoutSvg from '@/assets/logout-v2.svg'
  import { showConfirmDialog } from 'vant'
  import { removeToken } from '@/utils/token.js'
  const logoutAction = () => {
    showConfirmDialog({
      title: '提示',
      message: '是否确认退出？',
    })
      .then(() => {
        removeToken()
        window.location.href = '/kc/#/login'
      })
      .catch(() => {
        // on cancel
      });
  }

  let curMode = ref('race')
  on('kc_ws_event', (message = {}) => {
    console.log('ws_message', message)
    getTimuDetailAction()
    curMode.value = message.mode
    if (message.mode === 'must') {
      getTimuList()
    } else if (message.mode === 'must_common') {
      getCommonTimuList()
    } else if (message.mode === 'random_v2') {
      if (message.pkid === userStore.pkid) {
        console.log('你被选中了')
      }
    } else if (message.mode === 'race_timu') {
      // 题目
    } else if (message.mode === 'race_start') {
      // 开始抢答
    }
  })
  on('user_connection_success', (message) => {
    console.log('返回参数', message)
    emit('joinCompetition', userStore.roomId)
  })

  const getTimuList = () => {
    getTmList().then(res => {
      console.log('_res', res)
    }).catch(e => {
      console.log('_e', e)
    })
  }

  const getCommonTimuList = () => {
    getTimuCommonList().then(res => {
      console.log('_res', res)
    }).catch(e => {
      console.log('_e', e)
    })
  }

  let activityConfig =  ref({
    tm: {
      pkid: ''
    },
    dw: {
      pkid: ''
    },
    mode: null,
    startTime: 0,
    newTime: 0
  })

  let isOutTimeFlag = ref(false)
  const getTimuDetailAction = () => {
    getTimuDetail().then(res => {
      activityConfig.value = res.data
      curMode.value = activityConfig.value.mode
      const server_t = activityConfig.value.newTime
      const start_t = activityConfig.value.startTime
      const div_t = (server_t - start_t) / 1000
      const d_num = Math.floor(div_t)
      console.log('相差时间', d_num)
      // const isCurUser = userStore.pkid === activityConfig.value.dw?.pkid
      if (d_num < 10) {
        secondNum.value = 10 - d_num
        startTimer()
        isOutTimeFlag.value = false
      } else {
        secondNum.value = 0
        isOutTimeFlag.value = true
      }
      // userStore.canAnswerFlag = isCurUser && !isOutTimeFlag.value
      userStore.canAnswerFlag = true
    })
  }

  let secondNum = ref(10)
  const startTimer = () => {
    const secondTimer = setInterval(() => {
      secondNum.value -= 1
      if (secondNum.value === 0) {
        clearInterval(secondTimer)
        userStore.canAnswerFlag = false
      }
    }, 1000)
  }

  const showCheckResult = ref(false)
  const checkResultAction = () => {
    showCheckResult.value = true
  }

  onMounted(() => {
    getTimuDetailAction()
  })
</script>

<template>
  <div class="home-page">
    <div class="user-info">
      <div class="user-info-name">欢迎
        <span>{{ userStore.name }}</span>
        ，使用本系统
      </div>
      <div class="logout-svg">
        <img :src="logoutSvg" alt="logout" @click="logoutAction">
      </div>
    </div>
    <div class="time-box">
      请作答， 剩余时间
      <span>{{ secondNum }}</span>
      秒
    </div>
    <div class="app-main">
      <Timu
        :detail="activityConfig.tm"
        :mode="curMode"
        :can="!isOutTimeFlag && (userStore.pkid === activityConfig.tm?.pkid)"
      />
      <OptBtn
        :mode="curMode"
        :tid="activityConfig.tm?.pkid"
        @check_result="checkResultAction"
      />
    </div>
  </div>
  <van-overlay :show="showCheckResult" @click="showCheckResult = false">
    <div class="result-container">
      <CheckDialog />
    </div>
  </van-overlay>
</template>

<style scoped lang="scss">
:deep(.result-container) {
  width: 80vw;
  margin: 50vh auto 0;
  transform: translateY(-50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.home-page{
  box-sizing: border-box;
  padding: 20px;
  .time-box{
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    span{
      color: #ff976a;
      font-weight: bold;
      margin: 0 5px;
    }
  }
}
.user-info{
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-name{
    span{
      color:#ff976a;
    }
  }
  .logout-svg{
    img {
      width: 20px;
    }
  }
}
.app-main{
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
}
</style>
